<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>产品档案登记</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <!--搜索开始-->
            <fieldset class="layui-elem-field layuimini-search">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="" id="searchFrm">
                        <div class="layui-form-item">

                            <div class="layui-inline">
                                <label class="layui-form-label">产品名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="productName" id="productName" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">审核状态</label>
                                <div class="layui-input-inline">
                                    <select name="checkTag" class="checkTagSel">
                                        <option value="" selected>请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 150px;">开始时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="startTime" id="startTime" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label" style="width: 150px;">结束时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="endTime" id="endTime" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <a class="layui-btn " lay-submit="" lay-filter="data-search-btn"><label
                                        class="layui-icon layui-icon-search"></label>搜索</a>
                                <a class="layui-btn layui-btn-warm" onclick="javascript:$('#searchFrm')[0].reset()"
                                    lay-filter="data-search-btn"><label
                                        class="layui-icon layui-icon-refresh"></label>重置</a>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <!--搜索结束-->

            <!--表格开始-->
            <table class="layui-hide" id="productfileTable" lay-filter="productfileTable"></table>
            <div style="display: none;" type="text/html" id="productfileToolBar">
                <a class="layui-btn productfile_btn_add layui-btn-sm" lay-event="add">添加档案</a>
            </div>
            <div style="display: none;" type="text/html" id="productfileTableBar">
                <a class="layui-btn productfile_btn_show layui-btn-xs " lay-event="show">查看详情</a>
                <a class="layui-btn productfile_btn_update layui-btn-xs layui-btn-warm data-count-delete"
                    lay-event="update">修改</a>
                <a class="layui-btn productfile_btn_delete layui-btn-xs layui-btn-danger data-count-delete"
                    lay-event="delete">删除</a>
            </div>

            <!--表格结束-->

            <!--添加和修改的弹出层开始-->
            <div id="addOrUpdateDiv" style="display: none;padding: 20px;">
                <form method="post" class="layui-form layui-form-pane" lay-filter="dataFrm" id="dataFrm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">产品名称：</label>
                            <div class="layui-input-inline">
                                <!-- 做修改 -->
                                <input type="hidden" name="id" />
                                <input type="text" name="productName" lay-verify="required" autocomplete="off"
                                    class="layui-input" value="产品2">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">制作商：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="factoryName" autocomplete="off" class="layui-input"
                                    value="产品2制造商">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">产品简介：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="productNick" autocomplete="off" class="layui-input"
                                    value="产品2简介">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" id="firstKindIdSel">
                            <label class="layui-form-label" style="width: 150px;">一级分类</label>
                            <div class="layui-input-inline">
                                <select name="firstKindId" lay-filter="firstKindIdSel" class="firstKindIdSel">

                                </select>

                            </div>
                        </div>
                        <div class="layui-inline" id="firstKind_Name" hidden="hidden">
                            <label class="layui-form-label" style="width: 150px;">一级分类</label>
                            <div class="layui-input-inline">
                                <input type="text" name="firstKindName" id="firstKindName" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" id="secondkindIdSel">
                            <label class="layui-form-label" style="width: 150px;">二级分类</label>
                            <div class="layui-input-inline">
                                <select name="secondKindId" lay-filter="secondkindIdSel" class="secondkindIdSel"></select>
                            </div>
                        </div>
                        <div class="layui-inline" id="secondKind_Name" hidden="hidden">
                            <label class="layui-form-label" style="width: 150px;">二级分类</label>
                            <div class="layui-input-inline">
                                <input type="text" name="secondKindName" id="secondKindName" class="layui-input">
                            </div>

                        </div>

                        <div class="layui-inline" id="thirdKindIdSel">
                            <label class="layui-form-label" style="width: 150px;">三级分类</label>
                            <div class="layui-input-inline">
                                <select name="thirdKindId" class="thirdKindIdSel">

                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" id="thirdKind_Name" hidden="hidden">
                            <label class="layui-form-label" style="width: 150px;">三级分类</label>
                            <div class="layui-input-inline">
                                <input type="text" name="thirdKindName" id="thirdKindName" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">市场单价：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="listPrice" autocomplete="off" class="layui-input" value="1000">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">计划成本单价：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="costPrice" autocomplete="off" class="layui-input" value="800">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">计量单位：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="personalUnit" autocomplete="off" class="layui-input" value="个">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">计量值：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="personalValue" autocomplete="off" class="layui-input"
                                    value="1">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">保修期：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="warranty" autocomplete="off" class="layui-input" value="3年">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">生命周期：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="lifecycle" autocomplete="off" class="layui-input" value="5">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">用途类型：</label>
                            <div class="layui-input-inline">
                                <select name="type" class="typeSel">

                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">档次级别：</label>
                            <div class="layui-input-inline">
                                <select name="productClass" class="productClassSel">

                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">产品经理：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="responsiblePerson" autocomplete="off" class="layui-input"
                                    value="产品2经理">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">替代品名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="twinName" autocomplete="off" class="layui-input"
                                    value="替代品2名称">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 150px;">替代品编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="twinId" autocomplete="off" class="layui-input" value="bh2">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 150px;">产品描述：</label>
                        <div class="layui-input-inline" style="width: 930px;">
                            <input type="texteare" name="productDescribe" autocomplete="off" class="layui-input"
                                value="产品2描述">
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <label class="layui-form-label" style="width: 150px;">供应商集合：</label>
                        <div class="layui-input-inline" style="width: 930px;">
                            <select name="providerGroup" class="providerGroupSel">

                            </select>
                        </div>
                    </div>
                    <div class="" id="save" style="text-align: center;">
                        <a class="layui-btn " lay-submit="" lay-filter="doSubmit"><label
                                class="layui-icon layui-icon-release"></label>保存</a>
                        <a class="layui-btn layui-btn-warm" onclick="javascript:$('#dataFrm')[0].reset()"
                            lay-filter="data-search-btn"><label class="layui-icon layui-icon-refresh"></label>重置</a>
                    </div>
            </div>

            </form>

        </div>
        <!--添加和修改的弹出层结束-->
    </div>
    </div>
    <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../../../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
    <script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
    <script src="../../../lib/common/common.js" charset="utf-8"></script>

    <script>
        layui.use(['form', 'table', 'laydate', 'layer'], function () {
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            var layer = layui.layer;


            laydate.render({
                elem: '#startTime',
                type: "datetime"
            });
            laydate.render({
                elem: '#endTime',
                type: "datetime"
            });

            //加载查询条件里面的审核下拉列表
            $.get(api5 + "dropdownbox/queryAllCheckTag", function (res) {
                var search_checkTag = $(".checkTagSel");
                var html = "<option value =''>请选择</option>";
                var data = res.data;
                $.each(data, function (index, item) {
                    html += "<option value =" + item.keyNumber + ">" + item.textDescribe + "</option>";
                });
                search_checkTag.html(html);
                form.render("select");
            });

            //加载商品用途下拉列表
            $.get(api5 + "dropdownbox/queryAllType", function (res) {
                var search_type = $(".typeSel");
                var html = "<option value =''>请选择商品用途</option>";
                var data = res.data;
                $.each(data, function (index, item) {
                    html += "<option value =" + item.keyNumber + ">" + item.textDescribe + "</option>"
                });
                search_type.html(html);
                form.render("select");
            });

            //加载供应商下拉列表
            $.get(api + "provider/getAllAvailableProvider", function (res) {
                var search_providername = $(".providerGroupSel");
                var html = "<option value =''>请选择供应商</option>";
                var data = res.data;
                $.each(data, function (index, item) {
                    html += "<option value =" + item.providername + ">" + item.providername + "</option>"
                });
                search_providername.html(html);
                form.render("select");
            });


            //加载档次下拉列表
            $.get(api5 + "dropdownbox/queryAllLevel", function (res) {
                var search_productClass = $(".productClassSel");
                var html = "<option value =''>请选择档次级别</option>";
                var data = res.data;
                $.each(data, function (index, item) {
                    html += "<option value =" + item.keyNumber + ">" + item.textDescribe + "</option>"
                });
                search_productClass.html(html);
                form.render("select");
            });


            // 加载一级分类下拉列表
            $.get(api5 + "productkind/queryFirstProductKind", function (res) {
                var search_firstKindId = $(".firstKindIdSel");
                var html = "<option value=''>请选择</option>";
                var data = res.data;
                $.each(data, function (index, item) {
                    html += "<option value =" + item.id + " >" + item.kindName + "</option>";
                });

                search_firstKindId.html(html);
                form.render("select");
            });

            //加载二级分类
            form.on('select(firstKindIdSel)', function (data) {
                var search_thirdKindId = $(".thirdKindIdSel");
                var search_secondkindId = $(".secondkindIdSel");
                var html = "<option value =''>请选择</option>";
                if (data.value != "" && data.value != "") {
                    $.get(api5 + "productkind/queryProductKind", { id: data.value }, function (res) {
                        var data = res.data;
                        $.each(data, function (index, item) {
                            html += "<option value =" + item.id + ">" + item.kindName + "</option>"
                        });
                        search_secondkindId.html(html);
                        form.render("select");
                    });
                } else {
                    search_thirdKindId.html("")
                    search_secondkindId.html("");
                    form.render("select");
                }
            });

            //加载三级分类
            form.on('select(secondkindIdSel)', function (data) {
                var search_thirdKindId = $(".thirdKindIdSel");
                var html = "<option value =''>请选择</option>";
                if (data.value != "" && data.value != "") {
                    $.get(api5 + "productkind/queryProductKind", { id: data.value }, function (res) {
                        var data = res.data;
                        $.each(data, function (index, item) {
                            html += "<option value =" + item.id + ">" + item.kindName + "</option>"
                        });
                        search_thirdKindId.html(html);
                        form.render("select");
                    });
                } else {
                    search_thirdKindId.html("");
                    form.render("select");
                }
            })

            var tableIns = table.render({
                elem: '#productfileTable',
                url: api5 + 'productfile/queryAllProductFileByDeleteTag',
                toolbar: "#productfileToolBar",
                height: 'full-165',
                cols: [[
                    { type: "checkbox", fixed: "left", },
                    { field: 'productId', title: '编号', align: "center", },
                    { field: 'productName', title: '产品名称', align: "center", },
                    { field: 'theType', title: '用途类型', align: "center", },
                    { field: 'auditStatus', title: '审核状态', align: "center", },
                    { field: 'register', title: '创建人', align: "center", },
                    { field: 'registerTime', title: '添加时间', align: "center", },
                    { title: '操作', templet: '#productfileTableBar', fixed: "right", align: "center", }
                ]],
                page: true
            });

            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                var params = $("#searchFrm").serialize();
                //执行搜索重载
                table.reload('productfileTable', {
                    page: {
                        curr: 1
                    },
                    url: api5 + 'productfile/queryAllProductFileByDeleteTag?' + params
                });
                return false;
            });

            //监听表头的事件
            table.on('toolbar(productfileTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'batchdelete':
                        batchdelete();
                        break;
                    case 'add':
                        openAddproductfile();
                        break;
                };
            });

            //监听行数据的事件
            table.on('tool(productfileTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'delete') {
                    $.post(api5 + "productfile/updateDeleteProductFile", {
                        id: data.id
                    }, function (res) {
                        layer.msg(res.msg);
                        obj.del();
                        layer.close(index);
                    })
                } else if (obj.event === 'update') {
                    openUpdateproductfile(data);
                } else if (obj.event === 'show') {
                    showproductfile(data);
                }
            });

            //监听可用操作
            form.on('switch(availableSwitch)', function (obj) {
                $.post(api5 + "productfile/updateproductfile", { id: this.value, available: obj.elem.checked ? 1 : 0 }, function (res) {
                    layer.msg(res.msg);
                    tableIns.reload();
                })
            });

            //打开添加产品档案的弹层
            var mainIndex;
            var url; //动态的url
            function openAddproductfile() {
                mainIndex = layer.open({
                    type: 1,
                    title: '添加产品档案',
                    content: $("#addOrUpdateDiv"),
                    area: ['1200px', '600px'],
                    success: function (index) {
                        $("#save").css("display", "block");
                        $("#firstKindIdSel").show();
                        $("#secondkindIdSel").show();
                        $("#thirdKindIdSel").show();

                        $("#firstKind_Name").hide();
                        $("#secondKind_Name").hide();
                        $("#thirdKind_Name").hide();
                        url = api5 + "productfile/addProductFile";
                        //重置表单
                        $("#dataFrm")[0].reset();

                    }
                });
            }

            // 修改窗体
            function openUpdateproductfile(data) {
                mainIndex = layer.open({
                    type: 1,
                    title: '修改[' + data.productName + ']产品档案',
                    content: $("#addOrUpdateDiv"),
                    area: ['1130px', '580px'],
                    success: function (index) {
                        $("#save").css("display", "block");
                        $("#firstKindIdSel").show();
                        $("#secondkindIdSel").show();
                        $("#thirdKindIdSel").show();

                        $("#firstKind_Name").hide();
                        $("#secondKind_Name").hide();
                        $("#thirdKind_Name").hide();
                        url = api5 + "productfile/updateProductFile";
                        //装载数据表格
                        form.val("dataFrm", data);
                    }
                });
            }

            //详情窗口
            function showproductfile(data) {
                mainIndex = layer.open({
                    type: 1,
                    title: '查看[' + data.productName + ']产品档案',
                    content: $("#addOrUpdateDiv"),
                    area: ['1130px', '575px'],
                    success: function (index) {
                        //装载数据表格
                        console.log(data);
                        $("#firstKindIdSel").hide();
                        $("#secondkindIdSel").hide();
                        $("#thirdKindIdSel").hide();

                        $("#firstKind_Name").show();
                        $("#secondKind_Name").show();
                        $("#thirdKind_Name").show();
                        $("#save").css("display", "none");
                        form.val("dataFrm", data);
                    }
                });
            }


            //提交数据
            form.on("submit(doSubmit)", function (data) {
                var btn = $(this);
                btn.text("提 交 中...").attr("disabled", "disabled").addClass("layui-disabled");
                var params = $("#dataFrm").serialize();
                console.log(params);
                // alert(params)
                $.post(url, params, function (res) {
                    layer.msg(res.msg);
                    if (res.code == 200) {
                        btn.text("提交").attr("disabled", "").removeClass("layui-disabled");
                        tableIns.reload();
                    }
                    layer.close(mainIndex);
                })
                return false;
            })
        });
    </script>
</body>

</html>